<script lang="jsx" setup>
import { computed, nextTick, ref } from 'vue';
import { DeleteOutlined, DownloadOutlined } from '@ant-design/icons-vue';
import dayjs from 'dayjs';
import { deleteBoard, exportBoard } from '@/service/api/modules/workwear/board-management';

const commonSearchRef = ref(null);
const searchParams = ref({
  state: '3',
  moduleNo: null,
  screenTypeName: null
});

const searchFormList = [
  {
    type: 'input',
    key: 'moduleNo',
    label: '生产型号',
    placeholder: '请输入生产型号',
    span: 24,
    md: 12,
    lg: 8,
    xl: 8,
    xxl: 4
  },
  {
    type: 'input',
    key: 'screenTypeName',
    label: '网板类型',
    placeholder: '请输入网板类型',
    span: 24,
    md: 12,
    lg: 8,
    xl: 8,
    xxl: 4
  },
  {
    type: 'dateRangePicker',
    key: 'time',
    label: '日期',
    span: 24,
    md: 12,
    lg: 10,
    xl: 8,
    xxl: 6,
    showTime: true
  }
];

const searchData = computed(() => {
  const params = {
    ...searchParams.value
  };
  if (searchParams.value?.time?.[0]) {
    params.startTime = dayjs(searchParams.value.time[0]).format('YYYY-MM-DD HH:mm:ss');
    params.endTime = dayjs(searchParams.value.time[1]).format('YYYY-MM-DD HH:mm:ss');
  }
  delete params.time;
  return params;
});

const tableRef = ref(null);

const column = [
  {
    key: 'dataIndex',
    dataIndex: 'dataIndex',
    title: '序号',
    fixed: 'left',
    width: 70,
    align: 'center',
    checked: true,
    ellipsis: true
  },

  {
    key: 'screenNo',
    dataIndex: 'screenNo',
    title: '网板编码',
    align: 'center',
    checked: true,
    fixed: 'left',
    ellipsis: true,
    width: 160
  },
  {
    key: 'frameNo',
    dataIndex: 'frameNo',
    title: '网框编码',
    align: 'center',
    checked: true,
    ellipsis: true,
    fixed: 'left',
    width: 100
  },
  {
    key: 'moduleNo',
    dataIndex: 'moduleNo',
    title: '生产型号',
    align: 'center',
    checked: true,
    ellipsis: true,
    fixed: 'left',
    width: 150
  },
  {
    key: 'remark',
    dataIndex: 'remark',
    title: '备注',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 150
  },
  {
    key: 'pntType',
    dataIndex: 'pntType',
    title: '型号类型',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 75
  },
  {
    key: 'screenTypeName',
    dataIndex: 'screenTypeName',
    title: '网板类型',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 100
  },
  {
    key: 'face',
    dataIndex: 'face',
    title: '面向',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 75
  },

  {
    key: 'dateCode',
    dataIndex: 'dateCode',
    title: '周期',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 75
  },
  {
    key: 'meshCount',
    dataIndex: 'meshCount',
    title: '网纱T数',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 75
  },
  {
    key: 'locationName',
    dataIndex: 'locationName',
    title: '存放区域',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 100
  },

  {
    key: 'techName',
    dataIndex: 'techName',
    title: '使用工艺',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 100
  },
  {
    key: 'totalLive',
    dataIndex: 'totalLive',
    title: '使用寿命',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 75
  },
  {
    key: 'useCount',
    dataIndex: 'useCount',
    title: '印次',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 75
  },
  // {
  //   key: 'washCount',
  //   dataIndex: 'washCount',
  //   title: '翻洗次数',
  //   align: 'center',
  //   checked: true,
  //   ellipsis: true,
  //   width: 100
  // },
  {
    key: 'tensionA',
    dataIndex: 'tensionA',
    title: 'A点张力',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 75
  },
  {
    key: 'tensionB',
    dataIndex: 'tensionB',
    title: 'B点张力',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 75
  },
  {
    key: 'tensionC',
    dataIndex: 'tensionC',
    title: 'C点张力',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 75
  },
  {
    key: 'tensionD',
    dataIndex: 'tensionD',
    title: 'D点张力',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 75
  },
  {
    key: 'tensionE',
    dataIndex: 'tensionE',
    title: 'E点张力',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 75
  },

  {
    key: 'totalWc',
    dataIndex: 'totalWc',
    title: '最大翻洗次数',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 110
  },
  {
    key: 'makeBy',
    dataIndex: 'makeBy',
    title: '制作人',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 100
  },
  {
    key: 'makeDate',
    dataIndex: 'makeDate',
    title: '制作日期',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 150
  },
  {
    key: 'scrapBy',
    dataIndex: 'scrapBy',
    title: '报废人',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 100
  },
  {
    key: 'scrapDate',
    dataIndex: 'scrapDate',
    title: '报废日期',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 150
  },
  {
    key: 'scrapReason',
    dataIndex: 'scrapReason',
    title: '报废原因',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 150
  },

  {
    key: 'createBy',
    dataIndex: 'createBy',
    title: '创建人',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 100
  },
  {
    key: 'createDate',
    dataIndex: 'createDate',
    title: '创建时间',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 150
  },
  {
    key: 'updateBy',
    dataIndex: 'updateBy',
    title: '修改人',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 100
  },
  {
    key: 'updateDate',
    dataIndex: 'updateDate',
    title: '修改时间',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 150
  }
];

function search() {
  tableRef.value.getData(1);
}

function reset() {
  nextTick(() => {
    searchParams.value = {
      state: '3',
      moduleNo: null,
      screenTypeName: null
    };
    search();
  });
}

const tabaleSelect = ref([]);
function tableSelectChange(val) {
  tabaleSelect.value = val;
}

// 删除
function handelDel(row) {
  let title;
  if (row) {
    title = (
      <div>
        确定<span class="color-red font-bold">删除</span>网板编号为"
        <span class="color-blue font-bold">{row.screenNo}</span>"的记录吗？
      </div>
    );
  } else {
    title = (
      <div>
        确定将所勾选的项进行<span class="color-red font-bold">删除</span>操作吗？
      </div>
    );
  }
  window.$modal.confirm({
    title,
    onOk: () => {
      let params = [];
      if (row) {
        params = [row];
      } else {
        params = tabaleSelect.value;
      }
      deleteBoard(params).then(({ error }) => {
        if (!error) {
          window.$message.success('删除成功');
          search();
        }
      });
    },
    onCancel: () => {}
  });
}

function handle(data, type) {
  console.log(data);
  switch (type) {
    case 'del':
      handelDel(data.record);
      break;
    default:
  }
  data.hidePopup();
}

// 导出
function handelExport() {
  exportBoard(searchParams.value);
}
</script>

<template>
  <div class="board-management-page min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <CommonSearch
      ref="commonSearchRef"
      v-model:searchParams="searchParams"
      :form-list="searchFormList"
      :is-search="true"
      @search="search"
      @reset="reset"
    ></CommonSearch>
    <Table
      ref="tableRef"
      v-model:searchParams="searchData"
      :column="column"
      show-row-selection
      auto-generate-uuid
      row-key="screenId"
      :scroll="{ y: 'auto' }"
      is-init-get-data
      url="/qms/scrscreen/screenInfo/scrapPageList"
      @table-select-change="tableSelectChange"
      @table-row-dblclick="handleList"
    >
      <template #title>
        <AButton
          v-hasAuth="['workwear:board-management:delete']"
          type="primary"
          danger
          class="mini-btn mr-8px"
          size="small"
          ghost
          :disabled="!tabaleSelect.length"
          @click="handelDel()"
        >
          <template #icon>
            <DeleteOutlined class="align-sub" />
          </template>
          批量删除
        </AButton>

        <AButton
          v-hasAuth="['workwear:board-management:download']"
          type="primary"
          class="mini-btn mr-8px"
          size="small"
          ghost
          @click="handelExport()"
        >
          <template #icon>
            <DownloadOutlined class="align-sub" />
          </template>
          导出
        </AButton>
      </template>
      <template #contextmenuPopup-orter="{ args }">
        <li v-hasAuth="['workwear:board-management:delete']" class="popup-item" @click="handle(args, 'del')">
          <DeleteOutlined />
          删除
        </li>
      </template>
    </Table>
  </div>
</template>

<style lang="scss" scoped>
.popup-item {
  cursor: pointer;
  padding: 8px;

  &:hover {
    background-color: var(--surely-table-row-hover-bg);
  }

  &.disabled {
    color: var(--surely-table-disabled-color);
    cursor: not-allowed;
  }
}
</style>
